<template>
  <a-modal title="辅助作业工具配置项" :visible="visible" @cancel="handleCancel" :maskClosable="false">
    <template slot="footer">
      <a-button type="danger" :loading="dismissing" @click="handleSubmit(false)"> 解除关联 </a-button>
      <a-button @click="handleCancel"> 取消 </a-button>
      <a-button type="primary" :loading="consenting" @click="handleSubmit(true)"> 确认 </a-button>
    </template>
    <a-form-model ref="form" :model="queryParam" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="账套/核算单元" prop="accName">
        <a-input
          v-model="queryParam.accName"
          readOnly
          placeholder="请选择"
          @click.native="openOrganModel(1)"
        >
          <a-icon
            v-show="queryParam.accName"
            @click.stop="handlerClick1"
            slot="suffix"
            type="close"
            style="color: rgba(0, 0, 0, 0.45)"
          />
        </a-input>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称" prop="proName">
        <a-input
          @click.native="openOrganModel(2)"
          readOnly
          v-model="queryParam.proName"
          placeholder="请选择"
        >
          <a-icon
            v-show="queryParam.proName"
            @click.stop="handlerClick2"
            slot="suffix"
            type="close"
            style="color: rgba(0, 0, 0, 0.45)"
          />
        </a-input>
      </a-form-model-item>
    </a-form-model>
    <ZTCheckOrganModal ref="ZTCheckOrganModal" @ok="updateQueryParamZT"></ZTCheckOrganModal>
    <XMCheckOrganModal ref="XMCheckOrganModal" @getdata="updateQueryParamXM"></XMCheckOrganModal>
  </a-modal>
</template>

<script>
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import ZTCheckOrganModal from '@/views/sj/sjxmzygl/yzzx/testcomponent/CheckOrganModal'
import XMCheckOrganModal from '@/views/sj/sjmxgl/common/CheckOrganModal.vue'
export default {
  name: 'ToolConfiguration',
  components: {
    ZTCheckOrganModal,
    XMCheckOrganModal,
  },
  data() {
    return {
      queryParam: {
        accName: '',
        proName: '',
        id: '',
        accId: '',
        unitId: '',
        extraId: '',
        orgId: '',
        proId: '',
      },
      consenting: false,
      dismissing: false,
      visible: false,
      validatorRules: {
        // accName: [{ required: true, message: '请选择账套/核算单元', trigger: 'change' }],
        // proName: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        list: '/sjyzzx/sjWorkTool/addTool',
        check: '/sjyzzx/sjWorkTool/queryById',
      },
    }
  },
  methods: {
    handlerClick1() {
      this.queryParam.accName = ''
      this.queryParam.accId = ''
      this.queryParam.unitId = ''
      this.queryParam.extraId = ''
      this.queryParam.orgId = ''
    },
    handlerClick2() {
      this.queryParam.proName = ''
      this.queryParam.proId = ''
    },
    show(record) {
      this.queryParam = { ...this.$options.data().queryParam }
      this.id = record.id
      this.getToolConfigParams()
      this.visible = true
    },
    getToolConfigParams() {
      getAction(this.url.check, { id: this.id }).then((res) => {
        if (res.success) {
          // debugger
          let { id, accId, accName, unitId, extraId, orgId, proId, projName } = res.result
          this.queryParam = { id, accId, accName, unitId, extraId, orgId, proId, proName: projName }
          console.log(this.queryParam)
          // debugger
          if (res.result) {
          } else {
            this.queryParam = {
              accId: '',
              accName: '',
              unitId: '',
              extraId: '',
              orgId: '',
              proId: '',
              proName: '',
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    saveToolConfigParams(params, flag) {
      flag ? (this.consenting = true) : (this.dismissing = true)
      postAction(this.url.list, { ...params }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
        this.visible = false
        flag ? (this.consenting = false) : (this.dismissing = false)
      })
    },
    openOrganModel(number) {
      if (number == 1) {
        this.$refs.ZTCheckOrganModal.edit()
      } else {
        this.$refs.XMCheckOrganModal.edit()
      }
    },
    updateQueryParamXM(data) {
      console.log(data, 'data')
      this.queryParam.proId = data.proId
      this.queryParam.proName = data.proName
    },
    updateQueryParamZT(data, orgId) {
      console.log('updateQueryParamZT   data------>', data)
      let str1 = ''
      let str2 = ''
      let str3 = ''
      data.map((item) => {
        str1 += item.accCode + ','
        str2 += item.accName + ','
        str3 += item.unitId + ','
      })
      if (str1.length > 0) {
        str1 = str1.substr(0, str1.length - 1)
      }
      if (str2.length > 0) {
        str2 = str2.substr(0, str2.length - 1)
      }
      if (str3.length > 0) {
        str3 = str3.substr(0, str3.length - 1)
      }
      this.queryParam.accId = str1 //accId  同 accCode
      this.queryParam.accName = str2
      this.queryParam.unitId = str3
      this.queryParam.extraId = str2
      this.queryParam.orgId = orgId
    },
    handleSubmit(flag) {
      console.log(this.queryParam)
      if (flag) {
        this.$refs.form.validate((validate) => {
          if (validate) {
            this.saveToolConfigParams(Object.assign({}, this.queryParam, { id: this.id }), flag)
          }
        })
      } else {
        this.queryParam = {
          accId: '',
          accName: '',
          unitId: '',
          extraId: '',
          orgId: '',
          proId: '',
          proName: '',
        }
        this.saveToolConfigParams(Object.assign({}, this.queryParam, { id: this.id }), flag)
      }

      this.$emit('ok', true)
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>

<style scoped>
</style>
